<style type="text/css">
    .form-box {
        padding: 20px 20px 0 20px;
    }

    #layui-container {
        height: 830px;
    }

    .seal-selector {
        display: inline-block;
        box-shadow: 0 0 1px blue;
        cursor: pointer;
        width: 100px;
        height: 100px;
        margin-left: 10px;
    }

    .seal-selector:hover {
        cursor: pointer;
    }

    #seal-area {
        /*cursor: url(""), auto;*/
        /*cursor: crosshair;*/
    }

    .seal-selector-active {
        box-shadow: 0 0 5px red;
    }
</style>
<div id="layui-container" class="layui-anim layui-anim-downbit">
    <div class="layui-row">
        <div class="layui-btn-container">
            <button class="layui-btn" type="button" lay-active="loadQrcodeImg">扫码获取印章</button>
            <button class="layui-btn" type="button" lay-active="qrScanStatus">二维码扫码状态</button>
            <button class="layui-btn" type="button" lay-active="listSeals">获取印章列表</button>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md8">
            <div id="seal-area" style="border:1px solid blue;height:820px;width:615px;">

            </div>
            <div id="pdf-area" style="border:1px solid red;height:820px;width:615px;">
                <embed src="lib/pdfjs/web/viewer.html?file=https://ddzb-trading.oss-cn-beijing.aliyuncs.com/p3rv6ad3b9fabf8442d6ba76fc350bfc4de0.pdf"
                       width="100%" height="100%"/>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-row">
                <img id="qrImg" src="" alt=""/>
            </div>
        </div>
    </div>
</div>

<!-- 印章列表 start -->
<script id="seal-list" type="text/html">
    <form id="seal-select-form" class="form-box" action="">
        {{# layui.each(d, function (index, item) { }}
        <p>
            <input id="input{{index}}" type="radio" name="seal"
                   value="">
            <label for="input{{index}}">
                <img src="data:image/png;base64,{{item.sealImgBase64}}" width="120" height="120" alt="">
            </label>
        </p>
        {{# }); }}
    </form>
</script>
<!-- 印章列表 end -->

<script type="text/javascript">
    layui.use(['util', 'laytpl'], function () {
        let util = layui.util;
        let laytpl = layui.laytpl;

        let actionId;
        let accessResult;

        let active = {
            loadQrcodeImg: function () {
                request.bodyAjax(api.qrCodeImg, {
                    qrcodeType: 'SEAL',
                    extAttrs: {}
                }, function (res) {
                    if (res.success && res.status === 200) {
                        let $qrImg = $('#qrImg');
                        $qrImg.attr('src', api.viewCodeImg + res.data + "?n=" + new Date().getTime());
                        actionId = res.data;
                    }
                });
            },
            qrScanStatus: function (noToast, func) {
                request.bodyAjax(api.scanResult, {
                    actionId: actionId
                }, function (res) {
                    if (res.success && res.status === 200 && res.data !== false) {
                        layer.alert("二维码已被扫描, 详细信息请查看控制台");
                        accessResult = res.data;
                        console.log(accessResult);
                    } else {
                        layer.msg("没有查询到已扫描状态");
                    }
                    if (func) {
                        func();
                    }
                });
            },
            listSeals: function () {
                // if (accessResult) {
                // let checkResult = active.doCheck(accessResult);
                // 渲染印章列表
                request.bodyAjax(api.sealInfoList, {accessToken: accessResult.accessToken}, function (resSeals) {
                    if (resSeals.success && resSeals.status === 200 && resSeals.data.length) {
                        let tpl = document.getElementById("seal-list").innerHTML;
                        laytpl(tpl).render(resSeals.data, function (html) {
                            layer.open({
                                type: 1,
                                content: html,
                                title: '印章列表信息',
                                area: ['380px', '400px'],
                                maxmin: false,
                                shade: 0.3,
                                btn: ['确定', '取消'],
                                yes: function (index, layero, openNew) {
                                    let val = $("#seal-select-form").serializeArray();
                                    $("#seal-area").css("cursor", "url(" + val[0].value + ")");
                                    console.log("url(" + val[0].value + ")");
                                    layer.close(index);
                                    return false;
                                }
                            });
                        });
                    }
                });
                // return;
                // }
                // layer.alert("未能获取扫码的验证信息");
            },
            doCheck: function (data, func) {
                data.logicParam = {};
                let checkResult = false;
                request.bodyAjax(api.doCheck, data, function (res) {
                    if (res.success && res.status === 200) {
                        if (func) {
                            func();
                        }
                        checkResult = true;
                        return;
                    }
                    layer.alert(JSON.stringify(res));
                }, false);
                return checkResult;
            }
        };

        // layui的btn单独添加点击事件
        util.event('lay-active', active);

    });
</script>
